:root{
    --body-bg: rgb(255,220,170);
    --body-dark-bg: rgb(36,96,76);
    --link-norm: rgb(14,36,189);
    --link-hov: rgb(11,184,243);
    --link-gr-norm: rgb(150,150,150);
    --link-gr-hov: rgb(14,14,14);
    --link-drk-norm: rgb(85,171,255);
    --link-gr-drk-hov: rgb(235,235,255);
    --text-color: black;
    --text-drk-color: white;
    --text-hidden-color: rgba(0,0,0,.1);
    --text-drk-hidden-color: rgba(255,255,255,.1);
    --code-bg: rgb(220,220,220);
    --code-drk-bg: rgb(70,70,70);
    --code-scroll-bg: rgba(102,51,255,.1);
    --code-scroll-hov-bg: rgba(102,51,255,.25);
    --code-scroll-drk-bg: rgba(182,91,235,.35);
    --code-scroll-drk-hov-bg: rgba(182,91,235,.8);
    --table-border: #4e363a;
    --table-drk-border: #dfe2e5;
    /* color: var(--text-color); */
}
*{color:var(--text-color);}
*{transition:650ms;}
.darkTheme{background: var(--body-dark-bg);}
.darkTheme img{translate: brightness(0.9);}
.darkTheme #toolBar>button{filter: invert(100%) hue-rotate(.5turn);}
.darkTheme body{background: var(--body-dark-bg);}
.darkTheme *{color: var(--text-drk-color);}
/* .darkTheme span,.darkTheme em,.darkTheme strong,.darkTheme u,.darkTheme i,.darktheme b,.darkTheme div,.darkTheme code,.darkTheme table
{color: var(--text-drk-color);} */
.darkTheme .divClassNorm{box-shadow: 0 0 3px white; background:rgba(50,50,50,0.7);}
.darkTheme .searchLink,.darkTheme .searchLinkNoIcon{color: var(--link-drk-norm);}
.darkTheme .greyLink{color: var(--link-gr-norm);}
.darkTheme .greyLink:hover{color: var(--link-gr-drk-hov);}
//.darkTheme{color: var(--text-drk-color);}
.darkTheme .answers{color: var(--text-drk-hidden-color);}
.darkTheme code,.darkTheme inline-code{background: var(--code-drk-bg);}
.darkTheme code{outline-color: var(--text-drk-color);}
.darkTheme .codeContext::-webkit-scrollbar-thumb{background: var(--code-scroll-drk-bg);}
.darkTheme .codeContext:hover::-webkit-scrollbar-thumb{background: var(--code-scroll-drk-hov-bg);}
.darkTheme .codeContext::-webkit-scrollbar{color: transparent;}
.darkTheme code:before{border-color: var(--text-drk-color);}
.darkTheme table th,.darkTheme table td{border-color: var(--table-drk-border);}
body{
    background: var(--body-bg);
}
.divClassNorm{
    background:rgba(230,230,230,0.7);
    border-radius:7px;
    box-shadow:0px 0px 2px black;
    margin:auto 20px;
}
.sep{
    visibility:hidden;
    height:5px;
}
.hidden{
    visibility:hidden;
}
h1,h2,h3,h4,h5,h6{margin:4px auto;}
.searchLink,.searchLinkNoIcon{
    color: var(--link-norm);
    text-decoration: none;
    transition: 300ms;
}
.searchLink:hover,.searchLinkNoIcon:hover{
    color: var(--link-hov);
}
.searchLink:after{
    content: "\f002";
    font-size: smaller;
    vertical-align: super;
    font-family: var(--fa-style-family,"Font Awesome 6 Free");
    font-weight: var(--fa-style,900);
}
.greyLink{
    color: var(--link-gr-norm);
    text-decoration: none;
    transition: 300ms;
}
.greyLink:hover{
    color: var(--link-gr-hov);
}
.divSidebarMain{
    position: relative;
    left: calc((100% - 70%) / (-2));
    width: 70%;
}
.divSidebar{
    position: absolute;
    right: 0%;
    width: 30%;
    top: 10%;
}
.divSidebarFather{
    position: relative;
}
@media (max-width: 700px){
    .divSidebarFather{position: initial;}
    .divSidebarMain{position: initial; left: initial; width: 100%;}
    .divSidebar{position: initial; right: initial; width: 80%; top: 10%;}
}
img{
    width: 90%;
}
.smallImgGood{
    width: 30%;
}
.imgGood,.smallImgGood,.shadowed{
    transition: 300ms;
}
.imgGood:hover,.smallImgGood:hover,.shadowed:hover{
    filter: brightness(1.1) drop-shadow(2px 4px 4px black);
}
.imgGood:hover{
    transform: translate(-80%,0) scale(2);
}
.smallImgGood:hover{
    transform: translate(-160%,0) scale(5.5);
}
.smallText{
    font-size: xx-small;
    margin: 0px;
}
iframe{
    width: 90%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 16 / 9;
}
.nodsp{
    display: none;
}
.boxGood,.boxGoodMove{transition:300ms;}
.boxGood:hover{
    transform: scale(1.7);
    background:rgba(230,230,230,0.95);
}
.boxGoodMove:hover{
    transform: translate(-50%,0) scale(1.7);
    background:rgba(230,230,230,0.95);
}
.submitButton{
    background: blue;
    cursor: pointer;
    color: white;
    padding: 5px 15px;
    margin: 5px;
    border: 0;
    border-radius: 4px;
    transition: 300ms;
}
.submitButton:hover{
    background: rgb(11,177,243);
}
#notes-msg>#refreshButton{
    background: red;
    cursor: pointer;
    color: white;
    padding: 8px 18px;
    margin: 5px;
    border: 0;
    border-radius: 4px;
    transition: 300ms;
}
#notes-msg>#refreshButton:hover{
    background: rgb(255,80,20);
}
.loading{
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db; 
  border-radius: 50%;
  animation: spin 1.5s ease-in-out infinite;
}
@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#toolBar{
    position: fixed;
    right: 6%;
    bottom: 6%;
    z-index: 10;
    border-radius: 3px;
    margin: 0;
    backdrop-filter: blur(1px) saturate(0.5);
}
#toolBar>button{
    transition: filter 650ms, background 150ms;
    background: var(--link-norm);
    color: white;
    cursor: pointer;
    border: 0;
    border-radius: 3px;
    margin: 2px 3px;
    width: fit-content;
    aspect-ratio: 1/1;
}
#toolBar>button:hover{
    background: var(--link-hov);
}
#toolBar>button>span::before{
    width: 30px;
    color: white;
}
.answers{
    color: var(--text-hidden-color);
}
.answers:hover{
    color: inherit;
}
@keyframes highlight{
    0% {background: rgba(255,255,0,1); color: black;}
    40% {background: rgba(255,255,0,1); color: black;}
    /* 99% {background: rgba(255,255,0,0); color: unset;} */
    100% {background: unset; color: unset;}
}
*:target{
    animation: highlight 3s linear 1;
}
code,inline-code{
    text-align: left;
    white-space: pre !important;  /*正确显示代码内部的空格*/
    font-family: "Consolas","Courier New",monospace;
    background: var(--code-bg);
    /* border-radius: 1em; */
}
code{
    position: relative;
    display: block;
    padding: 2rem 1.1rem 0.4rem;
    margin: 1em auto;
    max-height: 400px;
    max-width: 90%;
    overflow: hidden;
    --code-lang: attr(data-lang);
    border-radius: 5px;
    outline: var(--text-color) 1px solid;
}
inline-code{
    display: inline;
    margin: auto .3em;
}
.codeContext::-webkit-scrollbar-thumb{
    background: var(--code-scroll-bg);
    display: block;
    border-radius: 7px;
}
.codeContext::-webkit-scrollbar-corner{width:0;}
.codeContext:hover::-webkit-scrollbar-thumb{background: var(--code-scroll-hov-bg);}
.codeContext::-webkit-scrollbar{color: transparent; width: 7px; height: 7px;}
code:before{
    content: var(--code-lang,"代码");
    position: absolute;
    top: 0.3rem;
    border: .1rem solid var(--text-color);
    border-radius: .15rem;
    transition: 650ms;
}
.codeContext{
    position: relative;
    /* padding:inherit; */
    padding-bottom: inherit;
    padding-top: 0.4rem;
    /* width: 100%; */
    overflow: auto;
}
code .codeCopyBut{
    position: absolute;
    right: 0;
    top: 0.3rem;
    border: 0;
    font-family: initial;
    cursor: pointer;
    background: inherit;
    transition: 100ms;
}
code .codeCopyBut:hover{
    color: #ea34d9;
}
code .codeCopyBut i{color: inherit; transition: inherit;}
table{
    border-collapse: collapse;
    border-spacing: 0;
    margin: 5px;
}
table th,table td{
    padding: 6px 13px;
    border: 1px solid;
    border-color: var(--table-border);
}
